<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="国家：">
        <el-input v-model="formInline.country" placeholder="Input English letters"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getVirusData">查询</el-button>
      </el-form-item>
    </el-form>
    <Table :data="virusData"></Table>
  </div>

</template>

<script>
import Table from "./Table"
import { ElMessage } from 'element-plus'

import { inject } from 'vue';

export default {
  
  setup() {
    const axios = inject('axios')
    console.log(axios)
  },

  mounted() {
    this.getVirusData()
  },

  name: "Search",
  components:{
    Table
  },
  data() {
    return {
      formInline: {
        country: ''
      },
      virusData: [],
    }
  },
  methods: {
    getVirusData() {
      // console.log("axios ======="+this.axios)
      
      this.axios.get("/list/"+this.formInline.country).then(res=>{
        console.log(res);
        if(res.data.code === 400){
          ElMessage.error(res.data.message);
          return -1;
        }
        ElMessage.success(res.data.message)
        var dataList = res.data.data.map(item => {
          return {
            state: item.state,
            country: item.country,
            latestTotalCases: item.latestTotalCases,
            diffFromPrevDay: item.diffFromPrevDay
          }
        });
        this.virusData = dataList;
      })
    }
  }
}
</script>

<style scoped>

</style>
